<template>
  <el-dialog class="bese-dilog" :append-to-body="appendToBody" :top="top" :width="width" v-bind="$attrs" :close-on-click-modal="false" v-on="$listeners">
    <div v-if="conentVisible" class="main">
      <slot />
    </div>
    <template slot="title">
      <slot name="title" />
    </template>
    <template slot="footer">
      <slot name="footer" />
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    appendToBody: {
      type: Boolean,
      default: true
    },
    top: {
      type: String,
      default: '8vh'
    },
    width: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      conentVisible: true
    }
  },
  watch: {
    '$attrs.visible'(val) {
      if (val) {
        this.conentVisible = true
      } else {
        const timer = setTimeout(() => {
          this.conentVisible = false
          clearTimeout(timer)
        }, 200)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body{
  padding: 10px 0 10px 20px;
}
.main{
  max-height: 70vh;
  overflow: auto;
}
.bese-dilog{
  /deep/ .el-input,/deep/ .el-textarea{
    width: 300px;
  }
}
.el-form{
  padding: 0;
}
</style>
